import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import PropTypes from "prop-types"
import './index.css'

export default class Hander extends Component {

    // 对接收的props进行类型、必要性的限制
    static propTypes = {
        addTodo:PropTypes.func.isRequired
    }
    
    handleKeyUp = (event)=>{
        // 解构赋值获取target,keyCode
        const {target,keyCode} = event
        // 判断是否是回车键值
        if(keyCode !== 13) return
        // 输入不能为空
        if(!target.value.trim()){
            alert("输入不能为空")
            return
        }
        // 准备好一个todo对象
        const todoObj = {id:nanoid(),name:target.value,done:false}
        // 将todoObj传递给app
        this.props.addTodo(todoObj)
        // 清空输入
        target.value = ''
    }

    render() {
        return (
            <div>
                <div className="todo-header">
                    <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
                </div>
            </div>
        )
    }
}
